import React, {Component} from 'react';
import {View,Text,TextInput,TouchableOpacity,StyleSheet} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AsyncStorage from "@react-native-community/async-storage";

class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
      phone: '',      // 电话
      sendCode: '',    // 验证码
    }
  }
  render() {
    return (
      <View>
        {/* 登录表单 */}
        <View style={styles.loginFormBox}>
          {/* 手机号*/}
          <View style={styles.phoneBox}>
            <View style={styles.phoneLeft}>
              <Ionicons name={'megaphone'} size={20} color={'#1fc9ff'}/>
              <TextInput placeholder="请输入手机号" onChangeText={phone=>{this.setState({phone})}}/>
            </View>
            <TouchableOpacity style={styles.sendCode} onPress={this.getSendCode}>
              <Text style={styles.sendCodeTxt}>发送验证码</Text>
            </TouchableOpacity>
          </View>
          {/*密码*/}
          <View style={styles.inputCode}>
            <Ionicons name={'key'} size={20} color={'#1fc9ff'}/>
            <TextInput placeholder="请输入验证码" onChangeText={sendCode=>{this.setState({sendCode})}}/>
          </View>
        </View>

        {/* 登录按钮 */}
        <View style={styles.loginBox}>
          <TouchableOpacity style={styles.loginBtnBox} onPress={this.login}>
            <Text style={styles.loginBtnTxt}>登 录</Text>
          </TouchableOpacity>
        </View>

        {/* 同意用户协议 */}
        <View style={styles.agreeBox}>
          <Ionicons name={'book'} color={'#1fc9ff'} size={20}/>
          <Text> 我已阅读并同意e袋洗的</Text>
          <Text style={styles.agreeImpTxt}>用户协议、隐私协议</Text>
        </View>
      </View>
    );
  }

  // 获取用户输入的电话号码，向后台请求验证码
  getSendCode = () => {
    let {phone} = this.state;
  };

  // 点击登录
  login = () => {
    let {phone,sendCode} = this.state;

    // 假设验证通过，成功登录，将后台发送的login与token保存到AsyncStorage中
    AsyncStorage.setItem('login','abc',()=>{
      this.props.navigation.navigate('order',{refresh:true})
    });
    AsyncStorage.setItem('token','1234');

  }
}

const styles = StyleSheet.create({
  // 登录表单
  loginFormBox:{
    backgroundColor:'#fff',
    marginTop:60,
    paddingLeft:10,
    paddingRight:20,
  },
  phoneBox:{
    flexDirection:'row',
    height:60,
    alignItems:'center',
    borderBottomWidth:1,
    borderBottomColor:'#eee',
    justifyContent:'space-between'
  },
  phoneLeft:{
    flexDirection: 'row',
    alignItems:'center',
  },
  sendCode:{
    borderWidth:1,
    borderColor:'#1fc9ff',
    padding:6,
    paddingRight:16,
    paddingLeft:16,
    borderRadius:10,
  },
  sendCodeTxt:{
    color:'#1fc9ff',
    fontSize:12,
  },
  inputCode:{
    height:60,
    flexDirection:'row',
    alignItems:'center',
  },

  // 登录按钮
  loginBox:{
    height:50,
    alignItems: 'center',
    marginTop: 40,
  },
  loginBtnBox:{
    width:'90%',
    height:'100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#1fc9ff',
    borderRadius: 5,
  },
  loginBtnTxt:{
    color:'#fff',
    fontSize: 16,
  },

  // 同意用户协议
  agreeBox:{
    padding:10,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
  },
  agreeImpTxt:{
    color:'#1fc9ff'
  }
});

export default Login;